<template>
  <div class="pad-out-box new-table-style relative-box">
    <option-list ref="option"></option-list>
    <el-form label-width="120px" size="small" :model="searchParams">
      <el-row>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="项目">-->
<!--            <el-select v-model="searchParams.projectKey" clearable filterable>-->
<!--              <el-option v-for="item in projectList" :key="item.primaryKey" :label="item.name" :value="item.primaryKey" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="待办类型">
            <el-select v-model="searchParams.type" clearable filterable>
              <el-option v-for="item in todoTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发起人">
            <el-input placeholder="请输入" v-model="searchParams.sender" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-date-picker v-model="searchParams.startTime" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-date-picker v-model="searchParams.endTime" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题">
            <el-input placeholder="请输入" v-model="searchParams.title" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" size="large" class="f-right" @click="getDataSource('')">查询</el-button>
          <el-button size="large" class="f-right margin-right-10" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <section class="search-result-box flex align-center font-size-14 padding-top-20 padding-bottom-20 color-666666">
      <div class="total-num-box margin-right-20 font-size-16">共<span class="margin-right-5 margin-left-5 color-3384FE">{{total}}</span>条</div>
<!--      <template v-if="is180DayIn">-->
<!--        <div class="color-999999 margin-right-10">仅显示180天内已办工作</div>-->
<!--        <div class="color-3384FE" style="cursor: pointer;" @click="checkSearch('all')">查看更多 ></div>-->
<!--      </template>-->
<!--      <template v-else>-->
<!--        <div class="color-999999 margin-right-10">全部已办工作</div>-->
<!--        <div class="color-3384FE" style="cursor: pointer;" @click="checkSearch('part')">仅显示180天内已办工作 ></div>-->
<!--      </template>-->

      <div class="flex-1 text-align-right">搜索结果</div>
    </section>

    <el-table :border="false" stripe :data="tableData" v-if="tableData && tableData.length">
      <el-table-column align="left" label="标题" prop="title"> </el-table-column>
      <!-- <el-table-column align="left" label="状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.workState=='approve'">已审核</span>
          <span v-if="scope.row.workState=='process'">审核中</span>
          <span v-if="scope.row.workState=='reject'"> 审核驳回</span>
        </template>
      </el-table-column> -->
      <el-table-column align="left" label="待办类型" prop="type" width="100"> </el-table-column>
      <el-table-column align="left" label="发起时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="处理时间" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.date | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="发起人" width="100">
        <template slot-scope="scope">
          {{scope.row.projectName ? scope.row.projectName + '-' + scope.row.sender : scope.row.sender}}
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="tableClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
  </div>
</template>
<script>
import { apiTodoList,projectList } from '../../api/workTrace';
import { dictList } from '../../api/common';
import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';

export default {
    mixins: [workTrace],

  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      // 搜索
      searchParams: {
        projectKey: '',
        type: '',
        sender: '',
        startTime: null,
        endTime: null,
        title: '',
      },
      // 是否180天之内
      is180DayIn: true,
      date180Before: null,
      projectList: [],
      todoTypeList: [],
      pickerOptions: {
        disabledDate: time => {
          if (this.searchParams.startTime) {
            return time.getTime() < this.searchParams.startTime;
          }
        },
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.searchParams.endTime) {
            return time.getTime() > this.searchParams.endTime;
          }
        },
      },
    };
  },

  mounted() {
    this.date180Before = new Date(new Date().getTime() - 180 * 24 * 3600 * 1000).getTime()
    this.getProjectList()
    this.getOptionList()
  },

  methods: {
    //重制查询条件
    reset(){
      this.searchParams = {
        projectKey: '',
        type: '',
        sender: '',
        startTime: null,
        endTime: null,
        title: '',
      }

      this.getDataSource('')
    },
    checkSearch (type) {
      this.is180DayIn = type != 'all'

      this.getDataSource('')
    },
    async getDataSource(more) {
      let queryParam = {
        currentPage: more ? this.currentPage : 1,
        pageSize: this.pageSize,
        action: 'done',
      }

      queryParam.projectKey = this.searchParams.projectKey || null
      queryParam.type = this.searchParams.type || null
      queryParam.sender = this.searchParams.sender || null
      queryParam.startTime = this.searchParams.startTime ? new Date(this.searchParams.startTime) : null
      queryParam.endTime = this.searchParams.endTime ? new Date(this.searchParams.endTime) : null
      queryParam.houseNumber = this.searchParams.title || null

      // 180天内限制
      if (this.is180DayIn) {
        if (queryParam.startTime) {
          queryParam.startTime = this.date180Before <= queryParam.startTime.getTime() ? queryParam.startTime : new Date(this.date180Before)
        }

        if (queryParam.endTime) {
          queryParam.endTime = this.date180Before <= queryParam.endTime.getTime() ? queryParam.endTime : new Date(this.date180Before)
        }
      }

      let res = await apiTodoList(queryParam);
      this.tableData = res.rows || [];
      this.total = res.total || 0;
      console.log(this.total)
    },
    async getProjectList () {
      let res = await projectList()
      this.projectList = res.rows || []
    },
    //字典
    async getOptionList() {
      let res = await dictList({
        dictType: 'process_type'
      });

      this.todoTypeList = res.rows || []
    },
    tableClick(row) {
        if (row.pcDetailUrl) {
          let url = window.location.origin + row.pcDetailUrl + '&applyUser=' + row.sender + '&applyUserKey=' + row.senderkey;
          window.open(url);
        }
      },
    //分页
    pageChange(page) {
      this.currentPage = page.currentPage
      this.getDataSource('more');
    },
  },

  components:{optionList}
};
</script>
<style lang="scss" scoped>
  .search-result-box {
    border-top: 1px solid #E5E5E5;
  }
</style>
